<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>c</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h2>姓名{{name}}</h2>
    <h2>性别{{gender}}</h2>
    <h2>年龄{{age}}</h2>
    <button @click="changName">点击修改姓名</button>
    <button @click="changGender">点击修改性别</button>
    <button @click="changA1">点击修改对外的年龄</button>
    <button @click="changA2">点击修改对内的年龄</button>
    <button @click="changAge">点击修改全部的年龄</button>
  </div>
</body>

<script type="text/javascript">
  // 创建Vue实例，得到ViewModel
  var vm = new Vue({
    el: '#demo',
    data() {
      return {
        name: '张三',
        gender: '女',
        age: {
          a1: 12,
          a2: 28
        }
      }
    },
    computed: {

    },
    methods: {
      changName() {
        this.name = '李四'
      },
      changGender() {
        this.gender = '男'
      },
      changA1() {
        this.age.a1 = 20
      },
      changA2() {
        this.age.a2 = 38
      },
      changAge() {
        this.age = {
          a1: 56,
          a2: 68
        }
      },
    },
    watch: {
      age: {
        deep: true,
        handler() {
          console.log('发生了变化');
        }
      }
    }
  })
</script>

</html>